import React from 'react'
import { Button, Result } from 'antd'
import { useNavigate } from 'react-router-dom'

const NotFound = () => {
  const nav = useNavigate()
  const handleClick = () => {
    nav('/', { replace: true })
  }

  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Button onClick={handleClick} type="primary">
            返回首页
          </Button>
        }
      />
    </div>
  )
}
export default NotFound
